<script language="JavaScript">
function contar() {
  n = document.getElementById("createPostingForm:description").value.length;
  if (n > 20000) {
    document.getElementById("createPostingForm:description").value = document.getElementById("createPostingForm:description").value.substring(0, 20000);
  }
  else {
    document.getElementById("createPostingForm:contador").value = 20000-n;
  }
}
</script>
<style>
    .rich-table-cell {
        border: 0px;
    }
</style>
<f:view>
    <h:form>
        <h:panelGrid columns="3" >
            <h:outputText value="Create a Community Posting in #{sessionBean.ejbSession.currentSite.site}" style="font-size: 20px; font-weight: bold;"/>
            <rich:toolBar id="toolBarUser" itemSeparator="line" width="200" style="right:5px; top:5px; position:absolute;">
                <a4j:region id="ajaxOpen" rendered="#{sessionBean.ejbSession.owner==null}">
                    <a4j:commandLink value="Log in to your account" onclick="Richfaces.showModalPanel('loginPanel');" focus="loginEmail" ajaxSingle="true" />
                </a4j:region>
                <h:outputLink value="/site/faces/signUp.jsp" target="_blank" rendered="#{sessionBean.ejbSession.owner==null}">
                    <h:outputText value="Sign Up"></h:outputText>
                </h:outputLink>
                <h:panelGroup rendered="#{sessionBean.ejbSession.owner!=null}">
                    <h:outputText value="Logged in as " />
                    <h:commandLink value="#{sessionBean.ejbSession.owner.email}" action="#{communityBean.homeUser}" />
                </h:panelGroup>
                <a4j:region id="ajaxLogout" rendered="#{sessionBean.ejbSession.owner!=null}">
                    <a4j:commandLink value="Log out" action="#{loginBean.logout}" reRender="toolBarUser,inputEmail,backForm" >
                        <f:setPropertyActionListener target="#{communityBean.back}" value="#{0}"/>
                    </a4j:commandLink>
                </a4j:region>
            </rich:toolBar>
            <a4j:status for="ajaxLogout" >
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
        </h:panelGrid>
    </h:form>
    <a4j:region>
    <h:form id="createPostingForm">
        <h:panelGrid rendered="#{communityBean.createOk}" >
            <h:messages globalOnly="true" />
            <h:outputLink value="/site/faces/recoveryPassword.jsp" rendered="#{communityBean.linkRPOk}" target="_blank">
                <h:outputText value="Recover your Password" />
            </h:outputLink>
        </h:panelGrid>
    <h:panelGrid rendered="#{!communityBean.createOk}" >
    <rich:panel>
        <h:messages globalOnly="true" style="color: red" styleClass="errorMessage"/>
        <h:panelGrid columns="3">
            <h:outputText value="(*) Title:"/>
            <h:inputText id="title" maxlength="100" value="#{communityBean.community.title}" size="70" required="true" requiredMessage="This is a required field"/>
            <h:message for="title" style="color: red" styleClass="errorMessage"/>
            
            <c:if test="${!empty sessionBean.areasCurrentSite}">
            <h:outputText value="Area:" />
            <a4j:region>
            <h:selectOneMenu id="area" value="#{communityBean.areaId}" >
                <c:forEach var="area" items="#{sessionBean.areasCurrentSite}" >
                    <f:selectItem
                        itemValue="#{area.id}"
                        itemLabel="#{area.area}"/>
                </c:forEach>
                <a4j:support event="onchange" reRender="locationPanel" ajaxSingle="true" />
            </h:selectOneMenu>
            <a4j:status>
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
            </a4j:region>
            <h:message for="area" />
            </c:if>
            
            <h:outputText value="Specific Location:"/>
            <h:panelGroup id="locationPanel">
            <h:inputText id="location" maxlength="70" value="#{communityBean.community.location}" size="50" rendered="#{empty communityBean.locationsCommunityArea}" />
            <h:selectOneMenu id="location1" value="#{communityBean.community.location}" rendered="#{!empty communityBean.locationsCommunityArea}" >
                <c:forEach var="location" items="#{communityBean.locationsCommunityArea}" >
                    <f:selectItem
                        itemValue="#{location.location}"
                        itemLabel="#{location.location}"/>
                </c:forEach>
            </h:selectOneMenu>
            </h:panelGroup>
            <a4j:commandButton id="refreshLocationPanel" style="display: none; visibility: hidden;" reRender="locationPanel" />
            
            <h:outputText value="Categorie:" />
            <h:selectOneMenu id="categorie" value="#{communityBean.communityCategorieId}" >
                <c:forEach var="categorie" items="#{adminBean.communityCategories}" >
                    <f:selectItem
                        itemValue="#{categorie.id}"
                        itemLabel="#{categorie.categorie}"/>
                </c:forEach>
            </h:selectOneMenu>
            <h:message for="categorie" />
        
            <h:outputText value="(*) Description:"/>
            <h:inputTextarea id="description" onkeydown="contar()" onkeyup="contar()" value="#{communityBean.community.description}" rows="7" cols="80" required="true" requiredMessage="This is a required field." />
            <h:panelGroup><h:inputText id="contador" onkeydown="contar()" onkeyup="contar()" value="#{communityBean.contador}" size="5" /><h:message for="description" style="color: red" styleClass="errorMessage"/></h:panelGroup>
            
        </h:panelGrid>
            
        <h:panelGrid id="inputEmail" columns="3">
            <h:outputText value="(*) Email Address:"/>
            <h:inputText id="email" maxlength="50" value="#{communityBean.community.email}" size="30" required="true" requiredMessage="This is a required field." rendered="#{sessionBean.ejbSession.owner==null}"/>
            <h:inputText id="email1" value="#{sessionBean.ejbSession.owner.email}" size="30" readonly="true" rendered="#{sessionBean.ejbSession.owner!=null}"/>
            <h:message for="email" style="color: red" styleClass="errorMessage"/>
            
            <c:if test="${sessionBean.ejbSession.owner==null}">
            <h:outputText value="(*) Re-Type Email Address:"/>
            <h:inputText id="email2" maxlength="50" value="#{communityBean.email1}" size="30" required="true" requiredMessage="This is a required field." />
            <h:message for="email2" style="color: red" styleClass="errorMessage"/>
            </c:if>
        </h:panelGrid>
            
        <h:panelGrid columns="2">
            <h:outputText value="Reply To:"/>
            <h:selectOneRadio id="typeReplayTo" value="#{communityBean.community.typeReplyTo}" layout="pageDirection">
                <f:selectItem 
                    itemValue="real email"
                    itemLabel="use this email address for replies."/>
                <f:selectItem
                    itemValue="masked email"
                    itemLabel="reply to: community-xxxxxxxxx@eez2find.com (ez2find hides your real email address and all replies go to it)."/>
                <f:selectItem
                    itemValue="any email"
                    itemLabel="DO NOT show any email address (be sure to put a phone # or other contact info in your posting)."/>
            </h:selectOneRadio>
            
            <h:outputText value="Images:"/>
            <rich:simpleTogglePanel id="uploadPanel" width="500px" opened="true" label="Manage your Images" switchType="client" >
                <div align="center">
                <rich:fileUpload immediateUpload="true" acceptedTypes="jpg, gif, png, bmp" addControlLabel="Add image..." maxFilesQuantity="#{4-communityBean.itemsSize}" uploadData="#{communityBean.uploadItems}" listHeight="60" autoclear="true" onupload="document.getElementById('createPostingForm:submit').disabled=true; document.getElementById('createPostingForm:preview').disabled=true;" onuploadcanceled="document.getElementById('createPostingForm:submit').disabled=false; document.getElementById('createPostingForm:preview').disabled=false;" ajaxSingle="true" >
                    <f:facet name="label">
                        <h:outputText value="{_KB}KB from {KB}KB uploadedm" />
                    </f:facet>
                    <a4j:support event="onuploadcomplete" oncomplete="document.getElementById('createPostingForm:submit').disabled=false; document.getElementById('createPostingForm:preview').disabled=false;" reRender="imagesPanel" ajaxSingle="true" />
                </rich:fileUpload>
                <h:panelGrid id="imagesPanel">
                <rich:dataGrid columns="2" value="#{communityBean.uploadItems}" var="item" rowKeyVar="row" >
                    <h:panelGrid>
                        <a4j:mediaOutput element="img" mimeType="image/jpg" createContent="#{communityBean.paint}" value="#{row}" cacheable="false" />
                        <a4j:commandLink value="Delete" action="#{communityBean.deleteItem}" reRender="uploadPanel" ajaxSingle="true">
                            <f:setPropertyActionListener target="#{communityBean.row}" value="#{row}" />
                        </a4j:commandLink>
                    </h:panelGrid>
                </rich:dataGrid>
                <a4j:commandLink value="Delete All Items" action="#{communityBean.deleteItems}" reRender="uploadPanel" ajaxSingle="true" rendered="#{communityBean.itemsSize>1}" />
                </h:panelGrid>
                </div>
            </rich:simpleTogglePanel>
            
            <h:outputText value="Permissions:"/>
            <h:panelGrid columns="2">
                <h:selectBooleanCheckbox value="#{communityBean.community.othersContact}" /><h:outputText value="OK to contact you for other kind of services (commercial, offers, services, etc)."/>
            </h:panelGrid>
        </h:panelGrid>
        
        <h:panelGrid columns="3">
            <a4j:commandButton id="submit" type="submit" value="Create" action="#{communityBean.create}" reRender="createPostingForm, backForm" />
            <a4j:status>
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
            <h:commandLink id="preview" value="Preview" action="#{communityBean.previewCreate}" rendered="#{!communityBean.createOk}" />
        </h:panelGrid>
    </rich:panel>
    </h:panelGrid>
    </h:form>
    </a4j:region>
    <h:form id="backForm">
        <h:panelGrid columns="2" rendered="#{communityBean.createOk}" width="35%">
            <h:commandLink value="Back to Welcome Page" action="#{communityBean.backEdit}" />
            <h:commandLink value="Back to Home User Account" action="#{communityBean.homeUser}" rendered="#{sessionBean.ejbSession.owner!=null}"/>
        </h:panelGrid>
        <h:commandLink value="Back" action="#{communityBean.backCreate}" rendered="#{!communityBean.createOk}"/>
    </h:form>
    <a4j:include viewId="../login.jspx"/>
    <rich:separator height="1" />
</f:view>
<script>document.getElementById("createPostingForm:refreshLocationPanel").click();</script>